<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    p {
      width: 200px;
      height: 50px;
      text-align: right;
      margin: 0;
      line-height: 50px;
      font-size: 24px;
    }

    .box {
      width: 200px;
      overflow: hidden;
    }

    input {
      margin: 0;
      padding: 0;
      width: 50px;
      height: 50px;
      float: left;
      box-sizing: border-box;
      border: 1px solid #CCCCCC;
      background-color: white;
      outline: none;
    }
  </style>
</head>

<body>
  <p></p>
  <div class="box">
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="+">
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="-">
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
    <input type="button" value="x">
    <input type="button" value="0">
    <input type="button" value="ce">
    <input type="button" value="=">
    <input type="button" value="/">
  </div>
  <script>
    var a = '', b = '', calc = '', f;
    var p = document.getElementsByTagName("p")[0];
    var inputs = document.getElementsByTagName("input");
    for (var i = 0, len = inputs.length; i < len; i++) {
      var some = inputs[i];
      if (!isNaN(parseInt(some.value))) {
        some.sign = 'number';
      } else if (some.value === "=") {
        some.sign = '=';
      } else if (some.value === 'ce') {
        some.sign = 'ce';
      } else {
        some.sign = 'calc';
      }
      some.onclick = function () {
        if (this.sign === '=') {
          if (b) {
            switch (calc) {
              case '+':
                f = function (a, b) {
                  return a + b;
                };
                break;
              case '-':
                f = function (a, b) {
                  return a - b;
                };
                break;
              case 'x':
                f = function (a, b) {
                  return a * b;
                };
                break;
              case '/':
                f = function (a, b) {
                  return a / b;
                };
                break;
            }
            p.innerHTML = a + calc + b + '=' + f(parseInt(a), parseInt(b));
            a = '';
            b = '';
            calc = '';
          }
        } else if (this.sign === 'calc') {
          if (a === '' || (a !== '' && b !== ''))
            return;
          calc = this.value;
          p.innerHTML = a + calc;
        } else if (this.sign === 'ce') {
          p.innerHTML = '';
          a = '';
          b = '';
          calc = '';
        } else {
          if (!calc) {
            a += this.value;
            p.innerHTML = a;
          } else {
            b += this.value;
            p.innerHTML = a + calc + b;
          }
        }
      }
    }
  </script>
</body>

</html>